<template>
	<view class="editAddress">
		<view @tap="cut" class="cut">{{isCut?'编辑':'完成'}}</view>
		<view class="address-box" v-for="(item,index) in list" :key="index">
			<view class="top">
				<view class="address-left">
					<view class="address-left-top">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
						<text class="default" v-show="item.isDefault">默认</text>
					</view>
					<view class="address-left-bottom">
						四川省 成都市 武侯区 石羊街道交子
						大道177号中海国际中心A座13楼1303
					</view>
				</view>
				<view class="address-right" @click="edit(item)">
					<image src="../../../../static/mine/edit.png" mode=""></image>
				</view>
			</view>
			<view class="bottom" v-if="isCut==false">
				<view class="bottom-left">
					<view class="options" :class="{'options-active':isChange == index}" @click="checked(index)"></view>
					<text>设置为默认地址</text>
				</view>
				<view class="bottom-right">
					删除
				</view>
			</view>
		</view>
		<view class="addAddress">
			<view class="btn" @click="addAddress">
				+添加收获地址
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChange: '-1', //单选
				isCut: true,
				list: [{
					name: '小明',
					phone: '123456789',
					isDefault: true
				}, {
					name: '小明',
					phone: '123456789',
					isDefault: false
				}, {
					name: '小明',
					phone: '123456789',
					isDefault: false
				}]
			}
		},
		methods: {
			//单选框
			checked(index) {
				if (index != this.isChange) {
					this.isChange = index
				}
			},
			cut(){
				this.isCut = !this.isCut
				// this.statisticsIndex = true
			},
			//编辑地址
			edit(){
				uni.navigateTo({
					url:'./editAddress'
				})
			},
			//添加收货地址
			addAddress(){
				uni.navigateTo({
					url:'./addAddress'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.cut{
		text-align: right;
	}
	.addAddress {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn {
			width: 670rpx;
			height: 60rpx;
			background: linear-gradient(163deg, #FF7200 0%, #EF130B 100%);
			opacity: 1;
			border-radius: 30rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 60rpx;
			color: #FFFFFF;
		}
	}

	.cut {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 0px;
		color: #333333;
	}

	.bottom-left {
		display: flex;

		text {
			margin-left: 20rpx;
		}
	}

	.options {
		width: 34rpx;
		height: 34rpx;
		background: #FFFFFF;
		border: 1px solid #B7B7B7;
		border-radius: 50%;
		opacity: 1;
	}

	.options-active {
		width: 34rpx;
		height: 34rpx;
		background: #FF7200;
		border-radius: 50%;
		opacity: 1;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		padding: 24rpx 0;
	}

	.default {
		width: 54rpx;
		height: 30rpx;
		border: 2rpx solid #FF7200;
		opacity: 1;
		border-radius: 4rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF7200;
		margin-left: 10rpx;
	}

	.editAddress {
		padding: 40rpx 40rpx 100rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #F2F2F2;
	}

	.address-box {
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		margin-top: 40rpx;
		.address-right {
			width: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 26rpx;
				height: 25rpx;
			}
		}

		.address-left {
			flex: 1;

			.address-left-bottom {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 48rpx;
				color: #333333;
			}

			.address-left-top {
				display: flex;
				align-items: center;

				.name {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}

				.phone {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
